<template>
	<view>
		<search_n></search_n>
		<view class="activeIcon">
			<view class="keshilist">
				<view class="keshilist_cont" id="keshilist_cont">
					<text :class="curData==1?'texts active':'texts'" @click="getHospitalData(1)">热门</text>
					<text :class="curData==2?'texts active':'texts'" @click="getHospitalData(2)">男科</text>
					<text :class="curData==3?'texts active':'texts'" @click="getHospitalData(3)">妇科</text>
					<text :class="curData==4?'texts active':'texts'" @click="getHospitalData(4)">产科</text>
					<text :class="curData==5?'texts active':'texts'" @click="getHospitalData(5)">儿科</text>
					<text :class="curData==6?'texts active':'texts'" @click="getHospitalData(6)">眼科</text>
				</view>
			</view>
			<view class="keshi_list_image">
				<image src="/static/4549.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="doctorList_body">
			
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5257.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>武汉阿波罗医院</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">医院简介：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<text class="shanchangs">科室：儿科</text>
				<view class="pingpins">
					<view class="pingluns">武汉市江汉区青年路464号</view>
					<view>到这里</view>
				</view>
				<view class="doctor_button">
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约咨询</text>
					</navigator>
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约挂号</text>
					</navigator>
					<navigator url="/pages/searchHospital/hospital_home">
						<text style="background-color:#2F7CFE;">去主页</text>
					</navigator>
				</view>
			</view>
			
			
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5257.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>武汉阿波罗医院</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">医院简介：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<text class="shanchangs">科室：儿科</text>
				<view class="pingpins">
					<view class="pingluns">武汉市江汉区青年路464号</view>
					<view>到这里</view>
				</view>
				<view class="doctor_button">
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约咨询</text>
					</navigator>
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约挂号</text>
					</navigator>
					<navigator url="/pages/searchHospital/hospital_home">
						<text style="background-color:#2F7CFE;">去主页</text>
					</navigator>
				</view>
			</view>
			
			
			
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5257.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>武汉阿波罗医院</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">医院简介：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<text class="shanchangs">科室：儿科</text>
				<view class="pingpins">
					<view class="pingluns">武汉市江汉区青年路464号</view>
					<view>到这里</view>
				</view>
				<view class="doctor_button">
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约咨询</text>
					</navigator>
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约挂号</text>
					</navigator>
					<navigator url="/pages/searchHospital/hospital_home">
						<text style="background-color:#2F7CFE;">去主页</text>
					</navigator>
				</view>
			</view>
			
			
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5257.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>武汉阿波罗医院</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">医院简介：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<text class="shanchangs">科室：儿科</text>
				<view class="pingpins">
					<view class="pingluns">武汉市江汉区青年路464号</view>
					<view>到这里</view>
				</view>
				<view class="doctor_button">
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约咨询</text>
					</navigator>
					<navigator url="/pages/searchHospital/doctor_detail">
						<text>预约挂号</text>
					</navigator>
					<navigator url="/pages/searchHospital/hospital_home">
						<text style="background-color:#2F7CFE;">去主页</text>
					</navigator>
				</view>
			</view>
			
			

		</view>
	
	</view>
</template>

<script>
	import search_n from '/pages/common/search_n.vue';
	export default {
		data() {
			return {
				curData: 1
			}
		},
		methods: {
			getHospitalData(obj) {
				this.curData = obj;
			},
		},
		created() {

		},
		components: {
			search_n
		}
	}
</script>

<style scoped>
	.keshilist {
		width: 90%;
		overflow-x: scroll;
		display: flex;
	}

	.keshilist_cont {
		display: flex;
		padding: 15px 0;
		flex: none;
	}

	.keshilist image {
		width: 10%;
	}

	.keshilist_cont text {
		font-size: 14px;
		padding: 15px;
		flex: none;
		font-weight: bold;
		position: relative;
	}

	.keshilist_cont text.active::after {
		position: absolute;
		content: "";
		height: 3px;
		width: 15px;
		background-color: #07BF64;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.activeIcon {
		position: relative;
	}

	.keshi_list_image {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 10px;
		top: 26px;
	}

	.keshi_list_image image {
		width: 30px;
		height: 30px;
	}

	.keshis {
		width: fit-content;
		background-color: aqua;
		color: #fff;
		font-size: 12px;
		border-radius: 2px;
		line-height: 20px;
		margin-left: 5px;
	}

	.doctorList_body {
		width: 94%;
		margin-left: 3%;
		padding-bottom: 50px;
	}

	.doctorList_item {
		display: flex;
		flex-direction: column;
		margin-bottom: 50px;
	}

	.d_headbox {
		display: flex;
	}

	.d_headbox image {
		width: 50px;
		height: 50px;
	}

	.d_headbox_title_box {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	.d_headbox_title_box text {
		font-size: 12px;
		margin-top: 5px;
	}

	.d_headbox_title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.shanchangs {
		font-size: 14px;
		margin: 5px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pingpins {
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
		border-top: 1px solid #eee;
		padding-top: 8px;
	}

	.pingpins text {
		color: red;
	}

	.butts {
		background-color: #07BF64;
		color: #fff;
		padding: 3px;
		border-radius: 3px;
	}

	.doctorList_body {
		margin-top: 15px;
	}
	
	.doctor_button{
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 12px;
		margin-top: 10px;
	}
	.doctor_button text{
		background-color: #07BF64;
		color: #fff;
		padding: 5px;
		border-radius: 3px;
	}
</style>